<template>
  <el-dialog
    title="插入模型"
    :width="742"
    :append-to-body="false"
    @close="handleClose"
    v-bind="$attrs"
  >
    <el-scrollbar>
      <div class="grid-wrap">
        <div
          class="grid-item"
          :class="{ active: selResource && list.resourceId === selResource.resourceId }"
          v-for="(list, index) in resourceList"
          :key="index"
          @click="chooseResource(list)"
        >
          <img v-if="list.resCover" class="icon" :src="retFilePath(list.resCover)" alt="" />
          <img class="icon" v-else src="@/assets/png/bg.png" alt="" />
        </div>
      </div>
    </el-scrollbar>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#0560FD" type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { messageUtil } from '@jl/element-plus/utils';
import { commonUpload } from '@/api/common';
import { CommonUploadResp } from '@/api/common/types';
import { getEffectList, createEffect } from '@/api/scene';
import { useRequest } from '@jl/common/composable';
import { getResourceList } from '@/api/resource';
import { IResource } from '@/api/resource/types';
import { retFilePath } from '@/utils';

defineOptions({
  name: 'ChooseResource',
});

const emits = defineEmits(['closeHandle', 'selResource']);

const { run: resourceRun, data: resourceData } = useRequest<any, API.Base.ResponsePage<IResource>>(
  getResourceList,
  { count: 0, list: [] }
);

const resourceList = computed(() => {
  return resourceData.value.list.filter((item: IResource) => item.fileType === 'gltf');
});
const selResource = ref<IResource | null>(null);

// const beforeUpload = async (file: any) => {
//   const fileSuffix = file.name.substring(file.name.lastIndexOf('.'));
//   if (!['.jpg', '.png'].includes(fileSuffix)) {
//     messageUtil.warning('文件格式错误');
//     return false;
//   }
//   const res: CommonUploadResp = await commonUpload(file);
//   const fData = new FormData();
//   fData.set('effType', 7);
//   fData.set('effName', `图片${Math.random().toString().split('.')[1]}`);
//   fData.set('effDesp', '');
//   fData.set('effCover', res.files[0].refAddress);
//   fData.set('quoteUrl', res.files[0].refAddress);
//   fData.set('configJson', '');
//   createEffect({ data: fData }).then(() => {
//     picList.value.push(retFilePath(res.files[0].refAddress));
//   });
//   return false;
// };

onMounted(async () => {
  resourceRun({
    params: {
      index: 1,
      pageSize: 10000,
    },
  });
});

function handleClose() {
  emits('closeHandle', false);
}

function submit() {
  if (!selResource.value) {
    messageUtil.warning('请选择图片');
    return;
  }
  emits('selResource', selResource.value);
}

function chooseResource(item: IResource) {
  selResource.value = item;
}
</script>

<style lang="less" scoped>
.grid-wrap {
  display: flex;
  flex-wrap: wrap;
  max-height: 400px;
  // overflow-y: auto;
  .el-scrollbar {
    width: 100%;
  }
  .grid-item {
    position: relative;
    width: 100px;
    height: 84px;
    border-radius: 8px;
    // border: 2px solid transparent;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    overflow: hidden;
    .svg-icon {
      font-size: 42px;
      margin-right: 0px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .icon {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &.import {
      background: #e8e8e8;
      border-color: #e8e8e8;
    }
    &.active {
      border: 2px solid #0560fd;
    }
    &:nth-child(6n) {
      margin-right: 0px;
    }
  }
}
</style>
